<template>
	<view>
		<view class="ibox">
			<input type="number" v-model="userId" placeholder="请输入手机号">
			<view class="codes">
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
				<input type="text" v-model="code" placeholder="请输入验证码">
				<button type="primary" @tap="getCode">{{tips}}</button>
			</view>
			<input type="password" v-show='show' placeholder="请输入密码" v-model="fPassword" maxlength=10>
			<image src="../../static/不显示密码.png" v-show='show' mode="" @click="display"></image>
			<input type="text" v-show="!show" :value="fPassword" maxlength=10>
			<image src="../../static/显示密码.png" v-show='!show' mode="" @click="display"></image>

			<input password placeholder="请再次输入密码" v-model="sPassword" maxlength=10>

			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import server from '@/util/http.js'
	export default {
		data() {
			return {
				userId: '',
				fPassword: '',
				sPassword: '',
				show: true,
				code: '',
				tips: '',
				seconds: 60
			}
		},
		methods: {
			display() {
				let shows = this.show === true ? false : true;
				this.passwords = this.fPassword;
				this.show = shows;
			},
			submit() {
				if (this.fPassword !== this.sPassword) {
					console.log('两次密码不一致');
				} else {
					server({
						url: `http://101.43.227.220:3003/teacher/resetPwd?inputCode=${this.code}&pwd=${this.sPassword}&id=1`,
						method: 'post',
						success: res => {
							uni.showToast({
								title: '成功',
								duration: 2000
							});
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				//判断手机号格式 是否正确
				let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (reg.test(this.userId)) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					server({
						url: 'http://101.43.227.220:3003/teacher/sendSms?phone=' + this.userId,
						method: 'post',
						success: res => {
							console.log(res);
						}
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('请输入正确手机号');
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	.ibox {
		width: 94%;
		margin: 0 auto;
		position: relative;
	}

	>>>.ibox input {
		padding: 10px 6px;
		border: 1px solid lightgray;
		border-radius: 5px;
		margin-top: 20px;
	}

	.ibox button {
		margin-top: 20px;
	}

	.ibox image {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 143px;
		opacity: 0.6;
	}

	.codes {
		display: flex;
	}
</style>
